<template>
    <div>
        <div class="container">
            <h1>我的预约</h1>
            <el-divider></el-divider>
            <div class="handle-box">
                <el-button type="primary" icon="el-icon-search"></el-button>

                <el-select style="margin-left: 10px" v-model="value" clearable @change="select_change" placeholder="请选择预约情况">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </div>

            <el-table :data="appointmentInfo" v-loading="loading" style="width: 100%" stripe>
                <el-table-column label="序号" type="index" width="50"> </el-table-column>
                <el-table-column label="上门地址" prop="appointment_address" width="300px"> </el-table-column>
                <el-table-column label="上门时间" prop="appointment_time"> </el-table-column>
                <el-table-column label="备注" prop="context"> </el-table-column>
                <el-table-column label="预约状态" prop="staff_id" width="100px">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.staff_id != null" type="primary">成功</el-tag>
                        <el-tag v-if="scope.row.staff_id === null && scope.row.state === 1" type="warning">待确认</el-tag>
                        <el-tag v-if="scope.row.staff_id === null && scope.row.state === 0" type="warning">失败</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="packaging" label="需要包装" width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.packaging === 1" type="success">是</el-tag>
                        <el-tag v-else type="danger">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="state">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.state === 0 && scope.row.staff_id != null" type="success">等待上门</el-tag>
                        <el-tag v-if="scope.row.state === 1 && scope.row.staff_id != null" type="primary">订单完成</el-tag>
                        <el-tag v-if="scope.row.state === 1 && scope.row.staff_id === null" type="warning">等待确认</el-tag>
                        <el-tag v-if="scope.row.state === 0 && scope.row.staff_id === null" type="info">订单取消</el-tag>
                        <el-tag v-if="scope.row.state === 3 && scope.row.staff_id != null" type="info">订单取消</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.staff_id === null" @click="refused(scope.$index, scope.row)" type="text" size="small"
                            >暂无详情</el-button
                        >
                        <el-button v-if="scope.row.staff_id != null" @click="show_detail(scope.row)" type="text" size="small"
                            >详情</el-button
                        >
                        <el-button
                            v-if="scope.row.state === 0 && scope.row.staff_id === null"
                            @click="del_fail(scope.$index, scope.row)"
                            type="text"
                            size="small"
                            >删除</el-button
                        >
                        <el-button
                            v-if="scope.row.state === 1 && scope.row.staff_id != null"
                            @click="del_sucess(scope.$index, scope.row)"
                            type="text"
                            size="small"
                            >删除</el-button
                        >

                        <el-button
                            v-if="scope.row.state === 3 && scope.row.staff_id != null"
                            @click="del_sucess_(scope.$index, scope.row)"
                            type="text"
                            size="small"
                            >删除</el-button
                        >
                        <el-button
                            v-if="scope.row.state === 1 && scope.row.staff_id === null"
                            @click="update(scope.$index, scope.row)"
                            type="text"
                            size="small"
                            >修改</el-button
                        >
                        <el-button
                            v-if="scope.row.state === 1 && scope.row.staff_id === null"
                            @click="cancel(scope.$index, scope.row)"
                            type="text"
                            size="small"
                            >取消</el-button
                        >
                        <el-button
                            v-if="scope.row.state === 0 && scope.row.staff_id != null"
                            @click="cancel_success(scope.$index, scope.row)"
                            type="text"
                            size="small"
                            >取消</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 15, 30, 45, 60, 75]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="length"
                style="margin-left: 35%; margin-top: 20px"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    // vue名字
    name: 'MyAppointment',
    // 数据
    data() {
        return {
            loading: false,
            //总数
            length: 0,
            //初始页
            currentPage: 1,
            //初始页大小
            pagesize: 5,
            drawer: false,
            options: [
                {
                    value: '1',
                    label: '预约成功'
                },
                {
                    value: '2',
                    label: '非预约成功'
                }
            ],
            value: '',
            appointmentInfo: [],
            appointmentInfo1: {
                appointment_id: '',
                user_id: '',
                appointment_address: '',
                appointment_time: '',
                context: '',
                packaging: '',
                state: ''
            }
        };
    },
    // 方法
    methods: {
        // 当前页大小
        handleSizeChange(val) {
            this.pagesize = val;
        },
        // 当前页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        show_detail(row) {
            console.log(row);
            this.drawer = true;
        },
        del_fail(index, row) {
            this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let param = new URLSearchParams();
                    param.append('appointment_id', row.appointment_id);
                    param.append('user_id', localStorage.getItem('user_id'));
                    param.append('state', row.state);
                    param.append('newState', 4);
                    if (row.staff_id === null) {
                        param.append('staff_id', 0);
                    } else {
                        param.append('staff_id', 1);
                    }
                    console.log(param);
                    const _this = this;
                    this.$axios({
                        method: 'PUT',
                        url: 'appointment/updateAppointmentByStaffId',
                        data: param,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                    })
                        .then(function (res) {
                            console.log(res);
                            if (res.data.code == 1) {
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                _this.$router.go(0);
                            } else {
                                _this.$message.error('删除失败！');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                            _this.$message('程序出现错误！');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消该操作'
                    });
                });
        },
        del_sucess(index, row) {
            this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let param = new URLSearchParams();
                    param.append('appointment_id', row.appointment_id);
                    param.append('user_id', localStorage.getItem('user_id'));
                    param.append('state', row.state);
                    param.append('newState', 5);
                    if (row.staff_id === null) {
                        param.append('staff_id', 0);
                    } else {
                        param.append('staff_id', 1);
                    }
                    console.log(param);
                    const _this = this;
                    this.$axios({
                        method: 'PUT',
                        url: 'appointment/updateAppointmentByStaffId',
                        data: param,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                    })
                        .then(function (res) {
                            console.log(res);
                            if (res.data.code == 1) {
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                _this.$router.go(0);
                            } else {
                                _this.$message.error('删除失败！');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                            _this.$message('程序出现错误！');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消该操作'
                    });
                });
        },
        update(index, row) {
            console.log(row);
        },
        cancel(index, row) {
            this.$confirm('此操作将取消该预约, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let param = new URLSearchParams();
                    param.append('appointment_id', row.appointment_id);
                    param.append('user_id', localStorage.getItem('user_id'));
                    param.append('state', row.state);
                    param.append('newState', 0);
                    if (row.staff_id === null) {
                        param.append('staff_id', 0);
                    } else {
                        param.append('staff_id', 1);
                    }
                    console.log(param);
                    const _this = this;
                    this.$axios({
                        method: 'PUT',
                        url: 'appointment/updateAppointmentByStaffId',
                        data: param,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                    })
                        .then(function (res) {
                            console.log(res);
                            if (res.data.code == 1) {
                                _this.$message({
                                    type: 'success',
                                    message: '取消成功!'
                                });
                                _this.$router.go(0);
                            } else {
                                _this.$message.error('取消失败！');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                            _this.$message('程序出现错误！');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消该操作'
                    });
                });
        },

        cancel_success(index, row) {
            console.log(row);
            this.$confirm('此操作将取消该预约, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let param = new URLSearchParams();
                    param.append('appointment_id', row.appointment_id);
                    param.append('user_id', localStorage.getItem('user_id'));
                    param.append('state', row.state);
                    param.append('newState', 3);
                    if (row.staff_id === null) {
                        param.append('staff_id', 0);
                    } else {
                        param.append('staff_id', 1);
                    }
                    console.log(param);
                    const _this = this;
                    this.$axios({
                        method: 'PUT',
                        url: 'appointment/updateAppointmentByStaffId',
                        data: param,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                    })
                        .then(function (res) {
                            console.log(res);
                            if (res.data.code == 1) {
                                _this.$message({
                                    type: 'success',
                                    message: '取消成功!'
                                });
                                _this.$router.go(0);
                            } else {
                                _this.$message.error('取消失败！');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                            _this.$message('程序出现错误！');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消该操作'
                    });
                });
        },

        //下拉框选择
        select_change() {
            console.log(this.value);
            if (this.value) {
                let param = new URLSearchParams();
                param.append('user_id', localStorage.getItem('user_id'));
                param.append('staff_id', this.value);
                console.log(param);
                const _this = this;
                this.$axios({
                    method: 'POST',
                    url: 'appointment/findByStaffId',
                    data: param,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                })
                    .then(function (res) {
                        console.log(res);
                        if (res.data.code == 1) {
                            _this.appointmentInfo = res.data.result;
                            _this.length = res.data.result.length;
                        } else {
                            _this.appointmentInfo = null;
                        }
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            } else {
                this.findAppointment();
            }
        },
        //查询所有预约
        findAppointment() {
            this.loading = true;
            let param = new URLSearchParams();
            param.append('user_id', localStorage.getItem('user_id'));
            const _this = this;
            this.$axios({
                method: 'POST',
                url: 'appointment/find',
                data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.loading = false;
                        _this.appointmentInfo = res.data.result;
                        _this.length = _this.appointmentInfo.length;
                    } else {
                        _this.loading = false;
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        }
    },

    // 页面初始化生命周期函数
    created() {
        this.findAppointment();
    }
};
</script>
// 样式
<style scoped>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.handle-box {
    margin-bottom: 20px;
}
</style>